<!DOCTYPE html>
<html lang="zh">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Fluency Questionnaire Survey - Vocabulary Test</title>
    <link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet" />
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css" />
    <style>
      body {
        min-height: 100vh;
        background-color: #f5f7fa;
        color: #333;
        transition: background-color 0.3s, color 0.3s;
      }

      body.dark-mode {
        background-color: #1a202c;
        color: #f7fafc;
      }

      .progress-container {
        width: 100%;
        height: 4px;
        background-color: #e2e8f0;
        border-radius: 2px;
        margin-bottom: 24px;
      }

      .progress-bar {
        height: 100%;
        background-color: #4f46e5;
        border-radius: 2px;
        transition: width 0.3s ease;
      }

      .top-nav {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 16px 0;
        margin-bottom: 16px;
      }

      .back-btn {
        width: 24px;
        height: 24px;
        display: flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
        color: #4b5563;
      }

      .dark-mode .back-btn {
        color: #e2e8f0;
      }

      .step-indicator {
        font-size: 14px;
        color: #6b7280;
      }

      .dark-mode .step-indicator {
        color: #9ca3af;
      }

      .vocabulary-level {
        margin-bottom: 24px;
      }

      .level-heading {
        display: flex;
        align-items: center;
        margin-bottom: 12px;
      }

      .level-badge {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 32px;
        height: 32px;
        border-radius: 16px;
        margin-right: 8px;
        font-weight: bold;
        color: white;
      }

      .a1-badge {
        background-color: #10b981;
      }
      .a2-badge {
        background-color: #3b82f6;
      }
      .b1-badge {
        background-color: #8b5cf6;
      }
      .b2-badge {
        background-color: #ec4899;
      }
      .c1-badge {
        background-color: #f97316;
      }
      .c2-badge {
        background-color: #ef4444;
      }

      .word-chips-container {
        display: flex;
        flex-wrap: wrap;
        gap: 8px;
      }

      .word-chip {
        padding: 8px 16px;
        background-color: #ffffff;
        border: 1px solid #e5e7eb;
        border-radius: 20px;
        cursor: pointer;
        transition: all 0.2s;
      }

      .dark-mode .word-chip {
        background-color: #2d3748;
        border-color: #4a5568;
        color: #e2e8f0;
      }

      .word-chip.selected {
        background-color: #3b82f6;
        border-color: #3b82f6;
        color: white;
      }

      .dark-mode .word-chip.selected {
        background-color: #4f46e5;
        border-color: #4f46e5;
      }

      .btn-primary {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        padding: 10px 24px;
        background-color: #4f46e5;
        color: white;
        border-radius: 8px;
        font-weight: 500;
        transition: background-color 0.2s;
        cursor: pointer;
        width: 100%;
      }

      .btn-primary:hover {
        background-color: #4338ca;
      }

      .dark-mode .btn-primary {
        background-color: #6366f1;
      }

      .dark-mode .btn-primary:hover {
        background-color: #4f46e5;
      }

      .theme-toggle {
        position: fixed;
        bottom: 24px;
        right: 24px;
        width: 48px;
        height: 48px;
        border-radius: 24px;
        background-color: #ffffff;
        box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
        display: flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
        z-index: 10;
        border: none;
        transition: background-color 0.3s;
      }

      .dark-mode .theme-toggle {
        background-color: #2d3748;
      }
    </style>
  </head>
  <body class="px-4 py-6">
    <div class="fixed inset-x-0 top-0">
      <div class="progress-container">
        <div class="progress-bar" style="width: 75%"></div>
      </div>
    </div>

    <div class="container mx-auto max-w-md">
      <!-- 顶部导航 -->
      <div class="top-nav">
        <div class="back-btn" onclick="window.location.href='/vocabulary_intro.html'">
          <i class="fas fa-arrow-left"></i>
        </div>
        <div class="step-indicator">步骤 6/8</div>
        <div style="width: 24px"></div>
        <!-- 占位，保持布局平衡 -->
      </div>

      <div class="flex-1 overflow-y-auto py-4">
        <h1 class="text-2xl font-bold text-gray-800 mb-4">请选择您认识的单词</h1>
        <p class="text-gray-600 mb-6">点击您认识的单词，被选中的单词将会变为蓝色</p>

        <!-- A1级别词汇 -->
        <div class="vocabulary-level">
          <h2 class="level-heading text-xl font-bold text-gray-800 mb-2">
            <span class="level-badge a1-badge">A1</span>
            基础词汇 (初级)
          </h2>
          <div class="word-chips-container">
            <div class="word-chip" onclick="toggleWord(this)">hello</div>
            <div class="word-chip" onclick="toggleWord(this)">goodbye</div>
            <div class="word-chip" onclick="toggleWord(this)">please</div>
            <div class="word-chip" onclick="toggleWord(this)">thank you</div>
            <div class="word-chip" onclick="toggleWord(this)">yes</div>
            <div class="word-chip" onclick="toggleWord(this)">no</div>
            <div class="word-chip" onclick="toggleWord(this)">sorry</div>
            <div class="word-chip" onclick="toggleWord(this)">house</div>
            <div class="word-chip" onclick="toggleWord(this)">car</div>
            <div class="word-chip" onclick="toggleWord(this)">family</div>
            <div class="word-chip" onclick="toggleWord(this)">school</div>
            <div class="word-chip" onclick="toggleWord(this)">friend</div>
          </div>
        </div>

        <!-- A2级别词汇 -->
        <div class="vocabulary-level">
          <h2 class="level-heading text-xl font-bold text-gray-800 mb-2">
            <span class="level-badge a2-badge">A2</span>
            基础词汇 (中级)
          </h2>
          <div class="word-chips-container">
            <div class="word-chip" onclick="toggleWord(this)">weather</div>
            <div class="word-chip" onclick="toggleWord(this)">holiday</div>
            <div class="word-chip" onclick="toggleWord(this)">hobby</div>
            <div class="word-chip" onclick="toggleWord(this)">shopping</div>
            <div class="word-chip" onclick="toggleWord(this)">weekend</div>
            <div class="word-chip" onclick="toggleWord(this)">birthday</div>
            <div class="word-chip" onclick="toggleWord(this)">restaurant</div>
            <div class="word-chip" onclick="toggleWord(this)">vegetable</div>
            <div class="word-chip" onclick="toggleWord(this)">dangerous</div>
            <div class="word-chip" onclick="toggleWord(this)">remember</div>
            <div class="word-chip" onclick="toggleWord(this)">laptop</div>
            <div class="word-chip" onclick="toggleWord(this)">understand</div>
          </div>
        </div>

        <!-- B1级别词汇 -->
        <div class="vocabulary-level">
          <h2 class="level-heading text-xl font-bold text-gray-800 mb-2">
            <span class="level-badge b1-badge">B1</span>
            中级词汇 (初级)
          </h2>
          <div class="word-chips-container">
            <div class="word-chip" onclick="toggleWord(this)">environment</div>
            <div class="word-chip" onclick="toggleWord(this)">opportunity</div>
            <div class="word-chip" onclick="toggleWord(this)">decision</div>
            <div class="word-chip" onclick="toggleWord(this)">application</div>
            <div class="word-chip" onclick="toggleWord(this)">appointment</div>
            <div class="word-chip" onclick="toggleWord(this)">employee</div>
            <div class="word-chip" onclick="toggleWord(this)">embarrassed</div>
            <div class="word-chip" onclick="toggleWord(this)">concentrate</div>
            <div class="word-chip" onclick="toggleWord(this)">convenient</div>
            <div class="word-chip" onclick="toggleWord(this)">apologize</div>
            <div class="word-chip" onclick="toggleWord(this)">development</div>
            <div class="word-chip" onclick="toggleWord(this)">arrangement</div>
          </div>
        </div>

        <!-- B2级别词汇 -->
        <div class="vocabulary-level">
          <h2 class="level-heading text-xl font-bold text-gray-800 mb-2">
            <span class="level-badge b2-badge">B2</span>
            中级词汇 (高级)
          </h2>
          <div class="word-chips-container">
            <div class="word-chip" onclick="toggleWord(this)">contradiction</div>
            <div class="word-chip" onclick="toggleWord(this)">enthusiasm</div>
            <div class="word-chip" onclick="toggleWord(this)">persuasion</div>
            <div class="word-chip" onclick="toggleWord(this)">reservation</div>
            <div class="word-chip" onclick="toggleWord(this)">determination</div>
            <div class="word-chip" onclick="toggleWord(this)">sophisticated</div>
            <div class="word-chip" onclick="toggleWord(this)">substantial</div>
            <div class="word-chip" onclick="toggleWord(this)">controversial</div>
            <div class="word-chip" onclick="toggleWord(this)">manipulation</div>
            <div class="word-chip" onclick="toggleWord(this)">legislation</div>
            <div class="word-chip" onclick="toggleWord(this)">assumption</div>
            <div class="word-chip" onclick="toggleWord(this)">persistent</div>
          </div>
        </div>

        <!-- C1级别词汇 -->
        <div class="vocabulary-level">
          <h2 class="level-heading text-xl font-bold text-gray-800 mb-2">
            <span class="level-badge c1-badge">C1</span>
            高级词汇 (初级)
          </h2>
          <div class="word-chips-container">
            <div class="word-chip" onclick="toggleWord(this)">unprecedented</div>
            <div class="word-chip" onclick="toggleWord(this)">jurisdiction</div>
            <div class="word-chip" onclick="toggleWord(this)">exemplify</div>
            <div class="word-chip" onclick="toggleWord(this)">assimilation</div>
            <div class="word-chip" onclick="toggleWord(this)">surveillance</div>
            <div class="word-chip" onclick="toggleWord(this)">terminology</div>
            <div class="word-chip" onclick="toggleWord(this)">imperialism</div>
            <div class="word-chip" onclick="toggleWord(this)">feasibility</div>
            <div class="word-chip" onclick="toggleWord(this)">bureaucracy</div>
            <div class="word-chip" onclick="toggleWord(this)">obsolescence</div>
            <div class="word-chip" onclick="toggleWord(this)">procurement</div>
            <div class="word-chip" onclick="toggleWord(this)">ambiguous</div>
          </div>
        </div>

        <!-- C2级别词汇 -->
        <div class="vocabulary-level">
          <h2 class="level-heading text-xl font-bold text-gray-800 mb-2">
            <span class="level-badge c2-badge">C2</span>
            高级词汇 (高级)
          </h2>
          <div class="word-chips-container">
            <div class="word-chip" onclick="toggleWord(this)">quintessential</div>
            <div class="word-chip" onclick="toggleWord(this)">idiosyncratic</div>
            <div class="word-chip" onclick="toggleWord(this)">juxtaposition</div>
            <div class="word-chip" onclick="toggleWord(this)">cacophony</div>
            <div class="word-chip" onclick="toggleWord(this)">sycophantic</div>
            <div class="word-chip" onclick="toggleWord(this)">propensity</div>
            <div class="word-chip" onclick="toggleWord(this)">mellifluous</div>
            <div class="word-chip" onclick="toggleWord(this)">ephemeral</div>
            <div class="word-chip" onclick="toggleWord(this)">ubiquitous</div>
            <div class="word-chip" onclick="toggleWord(this)">loquacious</div>
            <div class="word-chip" onclick="toggleWord(this)">obfuscation</div>
            <div class="word-chip" onclick="toggleWord(this)">perspicacious</div>
          </div>
        </div>
      </div>

      <!-- 底部按钮 -->
      <div class="mt-6">
        <button id="next-btn" class="btn-primary">完成词汇测试</button>
      </div>
    </div>

    <!-- 主题切换按钮 -->
    <button class="theme-toggle" id="theme-toggle">
      <i class="fas fa-moon"></i>
    </button>

    <script>
      // 切换单词选中状态
      function toggleWord(element) {
        element.classList.toggle('selected')
      }

      // 主题切换
      const themeToggle = document.getElementById('theme-toggle')
      const body = document.body
      const icon = themeToggle.querySelector('i')

      // 检查本地存储的主题
      if (localStorage.getItem('dark-mode') === 'true') {
        body.classList.add('dark-mode')
        icon.classList.remove('fa-moon')
        icon.classList.add('fa-sun')
      }

      themeToggle.addEventListener('click', () => {
        body.classList.toggle('dark-mode')

        if (body.classList.contains('dark-mode')) {
          icon.classList.remove('fa-moon')
          icon.classList.add('fa-sun')
          localStorage.setItem('dark-mode', 'true')
        } else {
          icon.classList.remove('fa-sun')
          icon.classList.add('fa-moon')
          localStorage.setItem('dark-mode', 'false')
        }
      })

      // 下一题/完成按钮点击事件
      document.getElementById('next-btn').addEventListener('click', function () {
        // 收集选中的单词
        const selectedWords = Array.from(document.querySelectorAll('.word-chip.selected')).map(el => el.textContent)

        // 这里可以添加保存选择结果的逻辑
        console.log('选中的单词:', selectedWords)

        // 完成测试，跳转到结果页
        window.location.href = '/vocabulary_result.html'
      })
    </script>
  </body>
</html>
